<template>
    <div id="app">
        <div style='width: 100%;height: 300px;'>
            <div id="top">
                <el-row class="demo-autocomplete" style="padding: 30px;top:50%;left:25%;">
                    <el-col :span="12">
                        <el-autocomplete
                                class="inline-input"
                                v-model="state2"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入内容"
                                :trigger-on-focus="false"
                                @select="handleSelect"
                                style="width: 400px;"
                        ></el-autocomplete>
                    </el-col>
                    <el-col style="margin-left: -200px;" :span="30">
                        <el-button type="info" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-col>
                </el-row>


                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         background-color="#2CC3CF" text-color="#fff" active-text-color="#ffd04b" router="true">
                    <el-menu-item :index="{path:'/views/AllGoods/' + username +'/'+ allgoods }">全部商品</el-menu-item>
                    <el-menu-item :index="{path:'/views/ShouYe/' + username +'/'+ ShouYe }">首页</el-menu-item>
                    <el-menu-item :index="{path:'/views/NewDrug/' + username +'/'+ newdrug }">新药特药进口药</el-menu-item>
                    <el-menu-item :index="{path:'/views/Slow/' + username +'/'+ slow }">慢性疾病</el-menu-item>
                    <el-menu-item :index="{path:'/views/Common/' + username +'/'+ common }">常见疾病</el-menu-item>

                    <div id="login" style="padding: 10px;position: absolute;right: 0px;margin-right: 50px">
                        <el-button v-on:click="Personal" :size="26" v-text='username' ></el-button>
                    </div>
                </el-menu>
            </div>
        </div>

        <div style="display: flex;flex-direction: row;">
            <div id="left" style="position: absolute;margin-top: -135px;">
                <el-col :span="30">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#2CC3CF" text-color="#fff" active-text-color="#ffd04b" router="true">
                        <el-menu-item :index="{path:'/views/YangSheng/' + username +'/'+ yangsheng }">
                            <i class="el-icon-suitcase"></i>
                            <span slot="title">中药养生</span>
                        </el-menu-item>
                        <el-menu-item :index="{path:'/views/BaoJian/' + username +'/'+ baojian }">
                            <i class="el-icon-menu"></i>
                            <span slot="title">营养保健</span>
                        </el-menu-item>

                        <el-menu-item :index="{path:'/views/ChangBei/' + username +'/'+ changbei }">
                            <i class="el-icon-present"></i>
                            <span slot="title">家中常备药</span>
                        </el-menu-item>
                        <el-menu-item :index="{path:'/views/QiXie/' + username +'/'+ qixie }">
                            <i class="el-icon-first-aid-kit"></i>
                            <span slot="title">医疗器械</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>

            </div>
            <router-view style="width: 70%;height:auto;position: absolute;margin-top: -135px;margin-left: 150px;background-color: antiquewhite;"></router-view>
            <Middle ></Middle>
        </div>
    </div>

</template>

<script>
 
  
  import Middle from './HomePage/Middle.vue'

    export default {
        name: 'HomePage',
        props:['username'],
		comments:{
			Middle
			
		},
        data() {
            return {
                input: '',
                restaurants: [],
                state2: '',
                medicineName:'',
                newdrug:'新药特药进口药',
                yangsheng:'中药养生',
                baojian:'营养保健',
                changbei:'家中常备药',
                qixie:'医疗器械',
                allgoods:'全部商品',
				ShouYe:'首页',
				common:'常见疾病',
				slow:'慢性疾病'
				
            }
        },
        methods:{
            Personal() {
                console.log("点击了")
                this.$router.push("/Personal/"+this.username)
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== 1);
                };
            },
            loadAll() {
                return [
                    {"value": "感康"},
                    {"value": "感冒灵"},
                    {"value": "脑白金"},
                    {"value": "新建特级红枣500g"},
                    {"value": "宁夏枸杞500g"},
                    {"value": "中药泡脚包驱寒（30小袋）"},
                    {"value": "汤臣倍健蛋白质营养粉（750g）"},
                    {"value": "汤臣倍健维生素D维生素K软胶囊（300粒）"},
                    {"value": "汤臣倍健褪黑素片（60片）"},
                    {"value": "江中健胃消食片（64片）"},
                    {"value": "江中健胃消食片（64片)"},
                    {"value": "仁和布洛芬缓释胶囊"},
                    {"value": "家用血压测量仪",},
                    {"value": "电子红外线额温枪家用"},
                    {"value": "志高全自动多功能家用按摩椅"}
                ];
            },
            search(){
                if(this.state2!=null){
                    console.log(this.state2)
                    this.$router.push("/views/SearchGoods/"+this.state2)
                }else{
                    this.$router.push("/views/AllGoods")
                }
            },
            handleSelect(item) {
                console.log(item);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        }

    }
</script>
